<template>
  <v-container>
    <v-sheet min-height="85vh" color="white">
      <v-sheet style="display: flex" class="flex-row justify-center align-center">
        <div ref="chart" class="chart"></div>
        <div ref="chart2" class="chart"></div>
      </v-sheet>
      <v-sheel style="display: flex" class="flex-column">
        <div ref="lineChart" class="line-chart"></div>
      </v-sheel>
    </v-sheet>
  </v-container>
</template>

<script>
import { mapGetters } from 'vuex'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入仪表盘，图表后缀都为 Chart
import {
  GaugeChart,
  LineChart
} from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([TitleComponent, TooltipComponent, GridComponent, GaugeChart, CanvasRenderer, LineChart])
export default {
  name: 'Dashboard',
  computed: mapGetters(['system']),
  watch: {
    system(r) {
      const { cpu, mem } = r
      this.chart.setOption({ series: [{ data: [cpu[ 0 ].value] }] })
      let times = []
      let values = []
      cpu.forEach(e => {
        let date = new Date(e.time)
        times.unshift(`${ date.getHours() }:${ date.getMinutes() }:${ date.getSeconds() }`)
        values.unshift(e.value)
      })
      let memValues = []
      this.chart2.setOption({ series: [{ data: [mem[ 0 ].value] }] })
      mem.forEach(e => {
        let date = new Date(e.time)
        memValues.unshift(e.value)
      })
      this.chart1.setOption({
        series: [{
          data: values
        }, {
          data: memValues
        }], xAxis: { data: times }
      })
    }
  },
  mounted() {
    this.initCpuGaugeChartWatch()
    this.initMemGaugeChartWatch()
    this.initLineChartWatch()
    window.addEventListener('resize', ev => {
      this.chart1.resize()
    })
  },
  methods: {
    initCpuGaugeChartWatch() {
      const option = {
        tooltip: {},
        series: [{
          type: 'gauge',
          name: 'CPU使用率',
          progress: {
            show: true,
            width: 18
          },
          axisLine: {
            lineStyle: {
              width: 18
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            length: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          axisLabel: {
            distance: 25,
            color: '#999',
            fontSize: 12
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 15,
            itemStyle: {
              borderWidth: 2
            }
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, '60%']
          },
          data: [{
            value: 4.2
          }]
        }]
      }
      const myChart = echarts.init(this.$refs.chart)
      myChart.setOption(option)
      this.chart = myChart
    },
    initLineChartWatch() {
      const option1 = {
        tooltip: {
          trigger: 'axis',
          formatter: '{a0} <br/> {b0}  <span style="color: orangered">{c1}%</span> <br/> {a1} <br />{b1} <span style="color: orangered">{c0}%</span>'
        },
        grid: {
          top: 10,
          bottom: 30
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '内存使用率',
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
            color: 'rgba(255, 191, 0)'
          },
          showSymbol: false,
          emphasis: {
            focus: 'series'
          },
          data: []
        }, {
          data: [],
          name: 'CPU使用率',
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
            color: 'rgba(1, 191, 236)'
          },
          showSymbol: false,
          emphasis: {
            focus: 'series'
          }
        }]
      }
      const myChart1 = echarts.init(this.$refs.lineChart)
      myChart1.setOption(option1)
      this.chart1 = myChart1
    },
    initMemGaugeChartWatch() {
      const option = {
        tooltip: {},
        series: [{
          type: 'gauge',
          name: '内存使用率',
          progress: {
            show: true,
            width: 18
          },
          axisLine: {
            lineStyle: {
              width: 18
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            length: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          axisLabel: {
            distance: 25,
            color: '#999',
            fontSize: 12
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 15,
            itemStyle: {
              borderWidth: 2
            }
          },
          title: {
            show: true
          },
          detail: {
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, '60%']
          },
          data: [{
            value: 4.2
          }]
        }]
      }
      const myChart = echarts.init(this.$refs.chart2)
      myChart.setOption(option)
      this.chart2 = myChart
    }
  }
}
</script>

<style scoped lang="scss">
.chart {
  width: 400px;
  height: 300px;
}

.line-chart {
  width: 100%;
  height: 40vh;
  margin-top: 40px;
}
</style>
